const path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
const webpack = require('webpack')

//env是环境，argv是运行中配置的所有参数
module.exports = (env,argv)=>{
const config ={
    mode:'none',//工作模式
    entry:'./src/main.js',//入口文件路径
    //内置的一些优化
    optimization:{
        //开启副作用，标记没有副作用的且没有使用的代码会被移除
        //给原型扩展方法就属于副作用，这时候要标记有副作用
        sideEffects:true,
        //只引入使用的代码
        usedExports:true,
        //压缩代码
        minimize:true,
        //尽可能将所有模块合并到一个函数，提升运行效率并减少体积
        concatenteModules:true,
        splistChunks:{
            //所有的公共模块都提取出来
            chunks:'all'
        },
        minimizer:[
            new OptimizeCssAssetsWebpackPlugin(),
            new TerserWebpackPlugin()
        ]
    },
    output:{//输出文件路径
        filename:'[hash].bundle.js',
        path:path.join(__dirname,'output'),
        // publicPath:'dist/'//指定资源根目录
    },
    module:{
        //其他资源模块的加载规则
        //常用laoder
        // 编译转换类(css-loader)
        // 文件操作类(file-loader)
        // 代码检查类(eslint-loader)
        rules:[
            {
                test:/\.vue$/,
                exclude:/node_modules/,
                use:'vue-loader'
            },
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:['babel-loader','eslint-loader']
            },
            {
            test:/.less$/,
            use:[
                'style-loader',
                'css-loader',
                'less-loader'
            ]
            },
            //用来加载文件类型，比如图片，导出的是文件路径，大文件使用路径
            {
                test:/.png$/,
                use:'file-loader'
            },
            {
                test:/.html$/,
                use:{
                    loader:'html-loader',
                    options:{
                        //添加触发打包的属性，默认只有src
                        attrs:['img:src','a:href']
                    }
                }
            },
            {
                test:/.md$/,
                use:'./markdown-loader'
            }
        ]
    },
    plugins:[
        //清除输出目录
        new CleanWebpackPlugin(),
        //自动把资源添加到html中,生成index.html
        new HtmlWebpackPlugin({
            title:'Webpack Plugin sample',
            meta:{
                viewport:'width=device-width'
            }
        }),
        //index.html
        new HtmlWebpackPlugin({
            filename:'index.html',
        }),
        //热更新
        new webpack.HotModuleReplacementPlugin(),
        new MiniCssExtractPlugin(),
    ]
}